<template>
  <!-- <fks-select
            v-if="multiPortal"
            v-model="portalLevel"
            size="medium"
            style="width: auto"
          >
            <fks-option
              v-for="type in portalTypes"
              :key="type.code"
              :label="type[$lang]"
              :value="type.code"
            />
          </fks-select> -->
  <fks-cascader
    v-if="multiPortal"
    ref="cascader"
    v-model="chosedPotal"
    :options="potalTreeForShow"
    :show-all-levels="false"
    :props="{
      checkStrictly: true,
      value: 'id',
      label: 'name'
    }"
    :disabled="!mainPortal"
    popper-class="portal-popper-cascader"
    @change="handleChange"
  >
    <!-- <template slot-scope="{ node, data }">
              <span @click="selectNode(node)">{{ data.name }}</span>
             </template> -->
  </fks-cascader>
</template>

<script>
import { AUTH_PORTAL } from '@/store/Getter/getterTypes.js'
import { UPDATE_AUTH_PORTAL } from '@/store/Mutation/mutationTypes'
export default {
  name: 'PortalSelector',
  data() {
    return {
      chosedPotal: [],
      portalLevel: '',
      portalId: ''
    }
  },
  computed: {
    potalTreeForShow() {
      let arr = this.portalTypes.filter((item) => {
        item.name = item[this.$lang]
        item.id = item.code
        item.children = this.$store.state.portals.filter((portal) => {
          return portal.type == item.code
        })
        if (item.children.length <= 0) {
          delete item.children
        }
        return true
      })

      return arr
    },
    /* 门户等级列表 */
    portalTypes() {
      return this.$store.state.enum.portalType || []
    },
    /* 当前门户 */
    portal() {
      return this.$store.state.portal
    },
    /* 多门户开关是否开启 */
    multiPortal() {
      return this.$store.getters.multiPortal
    },
    /**
     * @description: 是否一级门户，该级门户下才可跨门户切换，否则锁死为自己
     */
    mainPortal() {
      return this.portal.type == 1
    },
    /* 正在编辑的门户的等级和id */
    currentEditPotal() {
      return {
        type: this.portalLevel,
        portalId: this.portalId
      }
    }
  },
  watch: {
    portal: {
      immediate: true,
      handler: function () {
        if (this.multiPortal) {
          let authPortal = this.portal
          if (this.mainPortal && this.$storage.get('current_auth_portal')) {
            authPortal =
              JSON.parse(this.$storage.get('current_auth_portal')) || {}
          }

          this.portalLevel = authPortal.type
          this.portalId = authPortal.id ?? authPortal.portalId
        }
      }
    },
    currentEditPotal: {
      immediate: true,
      deep: true,
      handler: function () {
        this.chosedPotal = this.portalId
          ? Array(String(this.portalLevel), this.portalId)
          : Array(this.portalLevel)

        this.$store.commit(UPDATE_AUTH_PORTAL, this.currentEditPotal)

        this.$emit('change', this.currentEditPotal)
      }
    }
  },
  mounted() {},
  methods: {
    selectNode(node) {
      let newChosed = node.pathNodes.map((item) => item.value)
      this.chosedPotal = newChosed
      this.handleChange(newChosed)
    },
    /**
     * @description: 手动关闭下拉并回调
     */
    handleChange(value) {
      this.portalLevel = value[0]
      this.portalId =
        this.chosedPotal.length > 1
          ? this.chosedPotal[this.chosedPotal.length - 1]
          : ''
      this.$refs.cascader.dropDownVisible = false
    }
  }
}
</script>

<style>
</style>